<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Use Portal Basemaps | Sample | ArcGIS API for JavaScript 4.17</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.17/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/config",
        "esri/Map",
        "esri/portal/Portal",
        "esri/views/MapView",
        "esri/widgets/BasemapGallery",
        "esri/widgets/Search",
        "esri/widgets/Expand"
      ], function (
        esriConfig,
        Map,
        Portal,
        MapView,
        BasemapGallery,
        Search,
        Expand
      ) {
        // If you define the Portal URL in esriConfig, the
        // basemapGallery widget can determine which basemaps
        // to use.
        esriConfig.portalUrl = "https://jsapi.maps.arcgis.com";
        // Intialize a portal instance and load it
        var portal = new Portal();
        portal
          .load()
          .then(function () {
            console.log(portal);
            // A portal can be configured to use Vector Basemaps
            // by default or not.
            var basemap = portal.useVectorBasemaps
              ? portal.defaultVectorBasemap
              : portal.defaultBasemap;
            var map = new Map({
              basemap: basemap
            });
            var view = new MapView({
              container: "viewDiv",
              map: map,
              center: [-118.24, 34.073],
              scale: 10000
            });
            // The BasemapGallery will use the basemaps
            // configured by the Portal URL defined in esriConfig.portalUrl
            var basemapGallery = new BasemapGallery({
              view: view
            });
            var bgExpand = new Expand({
              view: view,
              content: basemapGallery
            });
            view.ui.add(bgExpand, "bottom-left");
            // The Search widget will also use the locators
            // configured by the Portal URL defined in esriConfig.portalUrl
            var search = new Search({ view: view });
            view.ui.add(search, "top-right");
          })
          .catch(function (error) {
            console.warn(error);
          });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
